<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="operate-dialog"
        :close-on-click-modal="false"
        destroy-on-close
        :model-value="['add', 'edit'].includes(state.form.operate!)"
        draggable
        @close="state.toggleForm('')">
        <template #header>
            <div class="title">
                {{ state.form.operate === 'add' ? '添加' : '编辑' }}
            </div>
        </template>
        <el-scrollbar v-loading="state.form.loading" class="table-form-scrollbar" height="400px">
            <div :class="`operate-form ${state.form.operate}-form`" :style="{ width: '100%' }">
                <el-form
                    v-if="!state.form.loading"
                    ref="formRef"
                    :model="state.form.items"
                    :label-width="state.form.labelWidth + 'px'"
                    :rules="rules"
                    @keyup.enter="state.onSubmit(formRef)">
                    <el-form-item prop="login_name" label="登陆账号">
                        <el-input
                            v-model="state.form.items!.login_name"
                            :disabled="state.form.operate === 'edit'"
                            placeholder="请输入登陆账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="nick_name" label="用户昵称">
                        <el-input v-model="state.form.items!.nick_name" placeholder="请输入用户昵称"></el-input>
                    </el-form-item>
                    <el-form-item v-if="state.form.operate === 'add'" prop="password" label="密码">
                        <el-input v-model="state.form.items!.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="{ width: '100%', textAlign: 'center' }">
                <el-button @click="state.toggleForm('')">取消</el-button>
                <el-button :loading="state.form.submitLoading" type="primary" @click="state.onSubmit(formRef)">
                    {{ state.form.operate === 'add' ? '保存' : '编辑' }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref, reactive, watch } from 'vue';
import { FormInstance, FormItemRule } from 'element-plus';
import { buildValidatorData } from '@/utils/validate';
import { UserTableDataState, UserTableDialogState } from '@/views/admin/user/interface';
import { TableState } from '@/components/table/table';

const formRef = ref<FormInstance>();
const state = inject('state') as TableState<UserTableDataState, UserTableDialogState>;

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    login_name: [buildValidatorData({ name: 'required', title: '登陆账号' }), buildValidatorData({ name: 'account' })],
    nick_name: [buildValidatorData({ name: 'required', title: '用户昵称' })],
    password: [buildValidatorData({ name: 'required', title: '密码' }), buildValidatorData({ name: 'password' })],
});
</script>
